import React from 'react';
import { observer, inject } from 'mobx-react';
import { routerShape } from 'react-router';
import { WeaTools,WeaErrorPage,WeaRightMenu,WeaTop,WeaLeftRightLayout,WeaLocaleProvider } from 'ecCom';
import { Button } from 'antd';
import * as mobx from 'mobx';
import LeftTree from './LeftTree';
import Condition from './Condition';
const getLabel = WeaLocaleProvider.getLabel;
const Base64 = WeaTools.Base64;

@inject("wfQueryIndexStore")
@observer
class QueryIndex extends React.Component{
    static contextTypes = {
        router: routerShape
    }
    constructor(){
        super();
    }
    doInit(props){
        const { wfQueryIndexStore } = props;
        const queryParams = this.props.location.query || {};
        const tabTitle = queryParams.tabTitle;
        const isPreview = queryParams.isPreview === "true" && "customid" in queryParams;    //后台自定义查询预览
        if(isPreview)
            wfQueryIndexStore.setUrlParams(queryParams);
        else if(tabTitle){
            wfQueryIndexStore.setUrlParams({'tabTitle':tabTitle});
        }
        wfQueryIndexStore.doInit();
        if(isPreview)
            wfQueryIndexStore.changeCustomid(queryParams.customid);
        if(!wfQueryIndexStore.title){  // 处理标题显示
            wfQueryIndexStore.title =getLabel(386385,'查询流程');
        }
    }
    componentDidMount(){
        this.doInit(this.props);
        if(window.location.pathname.indexOf('/spa/workflow/index') > -1)
            document.title = this.props.wfQueryIndexStore.title;
    }
    componentWillReceiveProps(nextProps) {
        if(this.props.location.key !== nextProps.location.key)
        	this.doInit(nextProps);
    }
    componentWillUnmount(){
        const { wfQueryIndexStore } = this.props;
        wfQueryIndexStore.clearStatus();
        _ListenerCtrl.unbind();
    }

    resetHeight = (height) => {
        jQuery(".wf-query-condition").height(height - 60);
    }
    render(){
        const { wfQueryIndexStore } = this.props;
        const { loading,title,urlParams } = wfQueryIndexStore;
        const rightDiv = [
            <div className="wf-query-condition">
                <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@ahgjy1@query`} queryStore={wfQueryIndexStore} onEnterSearch={this.forwardQueryResult} />
            </div>, 
            <div className="wf-query-btns">
                {this.getSearchButtons()}
            </div>
        ];
        return (
            <div className="wf-query-index">
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@3ejxkz`} datas={this.getRightMenu()}>
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@9a9830`}
                        title= {wfQueryIndexStore.title}
                        loading={loading}
                        icon={<i className='icon-coms-workflow' />}
                        iconBgcolor='#0079DE'
                        getHeight={this.resetHeight}
                        buttons={[]}
                        showDropIcon={true}
                        dropMenuDatas={this.getRightMenu()} 
                    >
                        {
                            urlParams.needTree === "false" ? 
                            <div>{rightDiv}</div> :
                            <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@dfnj4n`}
                                leftCom={<LeftTree ecId={`${this && this.props && this.props.ecId || ''}_LeftTree@opp6l5`} queryStore={wfQueryIndexStore} />}
                                defaultShowLeft={true}
                            >{rightDiv}</WeaLeftRightLayout>
                        }
                    </WeaTop>
                </WeaRightMenu>
            </div>
        )
    }
    getRightMenu(){
    	let btns = [];
    	btns.push({
            key: "search",
    		icon: <i className='icon-workflow-Right-menu--search'/>,
            content:getLabel(197,'搜索'),
            onClick: this.forwardQueryResult
    	});
    	return btns;
    }
    getSearchButtons() {
        const { wfQueryIndexStore } = this.props;
        const btnStyle = {borderRadius: 3, height: 28, width: 80}
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@detird@search`} type="primary" style={btnStyle} onClick={this.forwardQueryResult}>{getLabel(197,'搜索')}</Button>),
            (<span style={{width:'15px', display:'inline-block'}}></span>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@27n2vr@reset`} type="ghost" style={btnStyle} onClick={this.reset}>{getLabel(2022,'重置')}</Button>)
        ]
    }
    reset = ()=>{this.props.wfQueryIndexStore.resetCondition()};
    forwardQueryResult = () =>{
        const { wfQueryIndexStore } = this.props;
        const { urlParams } = wfQueryIndexStore;
        //路由跳转，跳转后做store拷贝条件
        this.context.router.push({
            pathname: "/main/workflow/queryFlowResult",
            query: {...{fromwhere:"queryIndex"}, ...urlParams}
        });
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@s2tndk`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(QueryIndex);